<template>
  <div id="container">
    <el-row>
      <el-col :xs="0" :sm="6" :md="6" :lg="5" :xl="8">&nbsp;</el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="14" :xl="8">
        <el-card>
          <div slot="header" class="clearfix">
            <div style="text-align: center">
              <span id="effect">🛺友链</span>
            </div>
          </div>
          <div id="friendArea">
            <Waterfall
              :list="infoList"
              :gutter="10"
              :width="150"
              :breakpoints="{
                1200: { //当屏幕宽度小于等于1200
                  rowPerView: 4
                },
                800: { //当屏幕宽度小于等于800
                  rowPerView: 3
                },
                500: { //当屏幕宽度小于等于500
                  rowPerView: 2
                }
              }"
            >
              <template #item="{ item }">
                <a :href="item['blog_url']" target="_blank">
                  <div style="display: flex; flex-direction: column; align-items: center; padding-bottom: 2rem">
                    <el-avatar :size="60" fit="cover" :src="item['avatar_url']" />
                    <div>{{ item['title'] }}</div>
                  </div>
                </a>
              </template>
            </Waterfall>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="0" :sm="6" :md="6" :lg="5" :xl="8">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
import { fetchLinkList } from '@/api/link'
import Waterfall from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin-test/dist/vue-waterfall-plugin.css'

export default {
  name: 'FriendChain',
  components: {
    Waterfall
  },
  data() {
    return {
      infoList: []
    }
  },
  created() {
    fetchLinkList().then(res => {
      this.infoList = res['data']['list']
    })
  },
  methods: {}
}
</script>

<style scoped>
#container {
  margin-bottom: 18rem;
}

a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000; /* 去除默认的颜色和点击后变化的颜色 */
}

#effect {
  font-size: 1.5em;
  letter-spacing: .2em;
}

#card {
  margin-left: 10px;
  margin-bottom: 30px;
  width: calc(25% - 16px);
}
</style>
